/**
 * 主应用组件
 */

import React, { useState } from 'react';
import { ConfigProvider, App as AntApp } from 'antd';
import { themeConfig } from './theme/themeConfig';
import { UploadPage } from './pages/UploadPage';
import { ProcessingPage } from './pages/ProcessingPage';
import { ReviewPage } from './pages/ReviewPage';
import { EditLanguagePage } from './pages/EditLanguagePage';
import { ResultPage } from './pages/ResultPage';
import { useAppStore } from './store/appStore';

// 配置Ant Design主题
const antdTheme = {
  token: {
    colorPrimary: themeConfig.colors.primary,
    colorSuccess: themeConfig.colors.success,
    colorWarning: themeConfig.colors.warning,
    colorError: themeConfig.colors.error,
    colorInfo: themeConfig.colors.info,
    colorText: themeConfig.colors.text,
    colorTextSecondary: themeConfig.colors.textSecondary,
    colorTextDisabled: themeConfig.colors.textDisabled,
    colorBgContainer: themeConfig.colors.backgroundLight,
    colorBgLayout: themeConfig.colors.background,
    colorBorder: themeConfig.colors.border,
    borderRadius: 4,
    fontFamily: themeConfig.typography.fontFamily,
    fontSize: 14,
    lineHeight: 1.5714285714285714,
  },
  components: {
    Button: {
      borderRadius: 4,
      controlHeight: 40,
    },
    Card: {
      borderRadius: 8,
    },
    Input: {
      borderRadius: 4,
      controlHeight: 40,
    },
    Upload: {
      borderRadius: 8,
    },
    Progress: {
      borderRadius: 4,
    },
    Steps: {
      borderRadius: 4,
    },
  },
};

const App: React.FC = () => {
  const [currentPage, setCurrentPage] = useState<'upload' | 'processing' | 'review' | 'edit' | 'result'>('upload');
  const [editingLanguageCode, setEditingLanguageCode] = useState<string>('');
  const { resetApp, updateLanguageFile } = useAppStore();

  const handleNext = () => {
    switch (currentPage) {
      case 'upload':
        setCurrentPage('processing');
        break;
      case 'processing':
        setCurrentPage('review');
        break;
      case 'review':
        setCurrentPage('result');
        break;
      default:
        break;
    }
  };

  const handleBack = () => {
    switch (currentPage) {
      case 'processing':
        setCurrentPage('upload');
        break;
      case 'review':
        setCurrentPage('processing');
        break;
      case 'edit':
        setCurrentPage('review');
        setEditingLanguageCode('');
        break;
      case 'result':
        setCurrentPage('review');
        break;
      default:
        break;
    }
  };

  const handleReset = () => {
    resetApp();
    setCurrentPage('upload');
    setEditingLanguageCode('');
  };

  const handleEditLanguage = (languageCode: string) => {
    setEditingLanguageCode(languageCode);
    setCurrentPage('edit');
  };

  const handleSaveLanguage = (updatedLanguage: any) => {
    updateLanguageFile(updatedLanguage.code, updatedLanguage.data);
    setCurrentPage('review');
    setEditingLanguageCode('');
  };

  const renderCurrentPage = () => {
    switch (currentPage) {
      case 'upload':
        return <UploadPage onNext={handleNext} />;
      case 'processing':
        return <ProcessingPage onComplete={handleNext} onBack={handleBack} />;
      case 'review':
        return <ReviewPage onBack={handleBack} onProceed={handleNext} onEditLanguage={handleEditLanguage} />;
      case 'edit':
        return (
          <EditLanguagePage 
            languageCode={editingLanguageCode}
            onBack={handleBack}
            onSave={handleSaveLanguage}
          />
        );
      case 'result':
        return <ResultPage onReset={handleReset} />;
      default:
        return <UploadPage onNext={handleNext} />;
    }
  };

  return (
    <ConfigProvider theme={antdTheme}>
      <AntApp>
        {renderCurrentPage()}
      </AntApp>
    </ConfigProvider>
  );
};

export default App;
